<template>
  <div class="view-container">
    <div class="main-content">
      <div class="list-container">
        <el-form
          :model="formData"
          :rules="rules"
          size="small"
          class="filter-form-inline"
        >
          <el-row :gutter="20">
            <el-col :lg="5" :xs="4">
              <el-form-item
                label="代理名称"
                style="width: 100%"
                prop="customerId"
              >
                <el-select
                  v-model="formData.agentId"
                  style="width: 100%"
                  placeholder="输入代理名称选择"
                  filterable
                  remote
                  reserve-keyword
                  :remote-method="remoteMethod"
                  :loading="loading"
                  @change="search"
                >
                  <el-option key="全部" label="全部" :value="0" />
                  <el-option
                    v-for="(item, idx) in optiones"
                    :key="item.id"
                    :label="item.customerName"
                    :value="item.customerId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="5" :xs="4">
              <el-form-item label="累计应付" style="width: 100%">
                <div style="display: flex">
                  <el-input
                    v-model="formData.minAmount"
                    placeholder="输入最小金额"
                    oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                    @blur="()=>formData.minAmount = Number(formData.minAmount)"
                  />
                  <span style="padding: 0px 4px; color: #666">-</span>
                  <el-input
                    v-model="formData.maxAmount"
                    placeholder="输入最大金额"
                    oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                    @blur="()=>formData.maxAmount = Number(formData.maxAmount)"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :lg="5" :xs="4">
              <el-form-item>
                <el-button class="border-btn" @click="empty">重置</el-button>
                <el-button type="primary" class="main-btn" @click="search"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <table-view :data="tableData" border style="width: 100%">
            <el-table-column
              prop="customerNumber"
              align="center"
              label="代理编号"
              :min-width="120"
              show-overflow-tooltip
            />

            <el-table-column
              prop="region"
              align="center"
              label="代理名称"
              :min-width="180"
            >
              <template #default="{ row }">
                {{ row.customerName }}
              </template>
            </el-table-column>

            <el-table-column
              prop="sumSellAmount"
              align="center"
              label="累计销售额(元)"
              :min-width="120"
            >
              <template #header>
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <span style="margin-right: 4px">累计销售额(元)</span>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="累计销售额为终端价减去配送费减去交易价后计算营销金额"
                    placement="top"
                  >
                    <i class="iconfont icon-wenhao main-color" />
                  </el-tooltip>
                </div>
              </template>
              <template #default="{ row }">
                <div>{{ isInteger(row.sumSellAmount) }}</div>
              </template>
            </el-table-column>
          </table-view>
          <Pagination
            v-model:page="formData.page"
            v-model:limit="formData.pageSize"
            style="display: flex; justify-content: flex-end"
            :total="total"
            @pagination="handlList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, getCurrentInstance, inject, onMounted, reactive, ref, toRefs,} from "vue";
import {useRouter} from "vue-router";

export default defineComponent({
  setup() {
    const data = reactive({
      loading: false,
      formData: {
        agentId: undefined,
        customerType: "agent",
        minAmount: null,
        maxAmount: null,
        page: 1,
        pageSize: 20,
      },
      optiones: [],
      tableData: [],
      total: 0,
      visible: false,
    });

    const router = useRouter();
    // 判断大小
    // const amountPass = (rule, value, callback) => {
    //   if (data.formData.minAmount && data.formData.maxAmount) {
    //     if (data.formData.minAmount < data.formData.maxAmount) {
    //       callback();
    //     } else {
    //       callback(new Error("最小金额必须小于最大金额"));
    //     }
    //   } else {
    //     if (data.formData.minAmount) {
    //       data.formData.maxAmount = null;
    //       callback();
    //     } else {
    //       data.formData.minAmount = 0;
    //       callback();
    //     }
    //   }
    // };

    // 搜索
    const search = () => {
      data.formData.page = 1;
      handlList();
    };

    // 重置
    const empty = () => {
      data.formData = {
        agentId: undefined,
        customerType: "",
        minAmount: null,
        maxAmount: null,
        page: 1,
        pageSize: 20,
      };
      handlList();
      console.log("sunsty");
    };

    const currentInstance = getCurrentInstance();
    // 获取列表
    const api = inject("api");
    const handlList = () => {
      api.agentAccount.AGENTACCOUNT_LIST(data.formData).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
          data.total = res.data.total;
        }
      });
    };
    // 列表绑定数据
    const remoteMethod = async (query, cb) => {
      data.customerLoading = true;
      const a = {
        customerType: data.formData.customerType,
        keyWord: query,
      };
      let results = [];
      const res = await api.agentAccount.AGENTACCOUNT_DETAIL(a);
      if (res.code === 0) {
        data.loading = false;
        results = res.data.list || [];
        data.optiones = results;
      }
    };

    onMounted(() => {
      handlList();
    });

    return {
      ...toRefs(data),
      empty,
      search,
      ref,
      page: 1,
      pageSize: 20,
      handlList,
      remoteMethod,
      // amountPass,
    };
  },
});
</script>

<style lang="scss" scoped>
</style>
